<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>记账凭证</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="记账凭证">
  <meta name="description" content="记账凭证">
  <meta name="author" content="yinqi">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
</head>

<style>
  .div1 {
    margin: 10px auto;
    top: 70px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 200px;
    margin-bottom: 10px;
  }

  .col-lg-12 {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 1000px;
    height: 500px;
    background-color: white;
  }
</style>

<body>
  <div class="lyear-layout-web" id="app">
    <div class="div1">
      <h1>记账凭证</h1>
    </div>
    <div class="col-lg-12">
      <el-button type="success" @click="insert()">保存</el-button><br>
      <template>
        <el-select v-model="credentialsLog.jzProof" placeholder="请选择" style="width: 80px;">
          <el-option v-for="item in proofList" :key="item.pProof" :label="item.pProof" :value="item.pProof">
          </el-option>
        </el-select>
      </template>
      <el-input style="width: 100px;" v-model="credentialsLog.jzH" placeholder="请输入内容"></el-input><span
        style="font-size: 18px;"> 号</span>
      <el-date-picker id="dd" type="date" v-model="credentialsLog.datea" placeholder="选择日期">
      </el-date-picker>
      <div class="div2" style="height: 400px;">
        <div class="div3" style="height: 80px;">
          <div style="width: 242px;height: 80px;float: left;border:1px solid #ccc">
            <div style="text-align: center;margin-top: 25px;font-size: 20px;">摘要</div>
          </div>
          <div style="width: 242px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
            <div style="text-align: center;margin-top: 25px;font-size: 20px;">会计科目</div>
          </div>
          <div style="width: 243px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
            <div style="text-align: center;margin-top: 25px;font-size: 20px;">借方金额</div>
          </div>
          <div style="width: 243px;height: 80px;float: left;border:1px solid #ccc;border-left: none;">
            <div style="text-align: center;margin-top: 25px;font-size: 20px;">贷方金额</div>
          </div>
        </div>
        <div class="div3" style="height: 60px;">
          <!-- 11111111111-->
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;"  id="z1">
              <option value=""></option>
              <option value="提现">提现</option>
              <option value="支付银行手续费">支付银行手续费</option>
              <option value="利息收入">利息收入</option>
              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
              <option value="购入固定资产">购入固定资产</option>
              <option value="支付货款">支付货款</option>
            </select>
          </div>
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="k1">
              <option value=""></option>
              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
            </select>
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="a1" @change="pd()">
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="a2"
              @change="pd1()">
          </div>
        </div>
        <div class="div3" style="height: 60px;">
          <!-- 22222222222 -->
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="z2">
              <option value=""></option>
              <option value="提现">提现</option>
              <option value="支付银行手续费">支付银行手续费</option>
              <option value="利息收入">利息收入</option>
              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
              <option value="购入固定资产">购入固定资产</option>
              <option value="支付货款">支付货款</option>
            </select>
          </div>
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="k2">
              <option value=""></option>
              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
            </select>
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="b1"
              @change="pd2()">
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="b2"
              @change="pd3()">
          </div>
        </div>
        <div class="div3" style="height: 60px;">
          <!-- 3333333333333 -->
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="z3">
              <option value=""></option>
              <option value="提现">提现</option>
              <option value="支付银行手续费">支付银行手续费</option>
              <option value="利息收入">利息收入</option>
              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
              <option value="购入固定资产">购入固定资产</option>
              <option value="支付货款">支付货款</option>
            </select>
          </div>
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="k3">
              <option value=""></option>
              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
            </select>
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="c1"
              @change="pd4()">
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="c2"
              @change="pd5()">
          </div>
        </div>
        <div class="div3" style="height: 60px;">
          <!-- 44444444444 -->
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="z4">
              <option value=""></option>
              <option value="提现">提现</option>
              <option value="支付银行手续费">支付银行手续费</option>
              <option value="利息收入">利息收入</option>
              <option value="报销销售人员的业务招待费">报销销售人员的业务招待费</option>
              <option value="购入固定资产">购入固定资产</option>
              <option value="支付货款">支付货款</option>
            </select>
          </div>
          <div style="width: 242px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <select style="width: 240px;height: 58px;border: 0px ;" id="k4">
              <option value=""></option>
              <option :value="item.kmCoding" v-for="(item,index) in subjectsList">{{item.kmName}}</option>
            </select>
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="d1"
              @change="pd6()">
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" id="d2"
              @change="pd7()">
          </div>
        </div>
        <!-- 总计 -->
        <div class="div3" style="height: 60px;">
          <div style="width: 484px;height: 60px;float: left;border:1px solid #ccc;border-top: none;">
              <div style="margin-top: 15px;margin-left: 10px;">
                <span style="font-size: 20px;">合计:&nbsp;{{sum}}</span>
              </div>
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" v-model="sum1">
          </div>
          <div style="width: 243px;height: 60px;float: left;border:1px solid #ccc;border-left: none;border-top: none;">
            <input style="width: 240px;height: 58px;border: 0px ;text-align: right;" type="text" v-model="sum2">
          </div>
        </div>
      </div>
      <div style="margin-top: -10px;">
        制单人: {{window.localStorage.getItem("username")}}
      </div>
    </div>

  </div>
  </div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      radio: '否',
      proofList: [],
      subjectsList: [],
      menu: [],
      loading: false,
      account: {},
      disabled: true,
      menuup: {},
      credentialsLog: {
        jzProof: "",
        jzH: "",
        jzDate: "",
      },
      credentialsLog2: {
        jzProof: "",
        jzH: "",
        jzDate: "",
      },
      sum1: 0,
      sum2: 0,
      sum:""
    },
    created() {
      this.getlist();
      this.getlist1();
    },
    methods: {

      getlist() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          axios.get("http://localhost:8888/proof/selectByExample")
            .then(res => {
              this.proofList = res.data
              this.proofList.forEach((item, index) => {
                if (item.pDefault === "是") {
                  this.credentialsLog.jzProof = item.pProof
                }
              })
            })
            .catch(err => {
              console.error(err);
            })

        }, 1);
      },
      getlist1() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          axios.get("http://localhost:8888/subjects/selectByExample")
            .then(res => {
              this.subjectsList = res.data
            })
            .catch(err => {
              console.error(err);
            })

        }, 1);
      },
      pd() {
        this.sum1 = 0;
        // if (this.sum2 != 0) {
        //   this.sum2 = this.sum2 - parseInt($("#a2").val());
        // }
        if ($("#a2").val() != "") {
          this.sum2 = this.sum2 - parseInt($("#a2").val());
          $("#a2").val(null)
        }
        if ($("#a1").val() != "") {
          this.sum1 = parseInt($("#a1").val()) + this.sum1;
        }
        if ($("#b1").val() != "") {
          this.sum1 = parseInt($("#b1").val()) + this.sum1;
        }
        if ($("#c1").val() != "") {
          this.sum1 = parseInt($("#c1").val()) + this.sum1;
        }
        if ($("#d1").val() != "") {
          this.sum1 = parseInt($("#d1").val()) + this.sum1;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd1() {
        this.sum2 = 0;
        // if (this.sum1 != 0) {
        //   this.sum1 = this.sum1 - parseInt($("#a1").val());
        // }
        if ($("#a1").val() != "") {
          this.sum1 = this.sum1 - parseInt($("#a1").val());
          $("#a1").val(null)
        }
        if ($("#a2").val() != "") {
          this.sum2 = parseInt($("#a2").val()) + this.sum2;
        }
        if ($("#b2").val() != "") {
          this.sum2 = parseInt($("#b2").val()) + this.sum2;
        }
        if ($("#c2").val() != "") {
          this.sum2 = parseInt($("#c2").val()) + this.sum2;
        }
        if ($("#d2").val() != "") {
          this.sum2 = parseInt($("#d2").val()) + this.sum2;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd2() {
        this.sum1 = 0
        // if (this.sum2 != 0) {
        //   this.sum2 = this.sum2 - parseInt($("#b2").val());
        // }
        if ($("#b2").val() != "") {
          this.sum2 = this.sum2 - parseInt($("#b2").val());
          $("#b2").val(null)
        }
        if ($("#a1").val() != "") {
          this.sum1 = parseInt($("#a1").val()) + this.sum1;
        }
        if ($("#b1").val() != "") {
          this.sum1 = parseInt($("#b1").val()) + this.sum1;
        }
        if ($("#c1").val() != "") {
          this.sum1 = parseInt($("#c1").val()) + this.sum1;
        }
        if ($("#d1").val() != "") {
          this.sum1 = parseInt($("#d1").val()) + this.sum1;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd3() {
        this.sum2 = 0;
        // if (this.sum1 != 0) {
        //   this.sum1 = this.sum1 - parseInt($("#b1").val());
        // }
        if ($("#b1").val() != "") {
          this.sum1 = this.sum1 - parseInt($("#b1").val());
          $("#b1").val(null)
        }
        if ($("#a2").val() != "") {
          this.sum2 = parseInt($("#a2").val()) + this.sum2;
        }
        if ($("#b2").val() != "") {
          this.sum2 = parseInt($("#b2").val()) + this.sum2;
        }
        if ($("#c2").val() != "") {
          this.sum2 = parseInt($("#c2").val()) + this.sum2;
        }
        if ($("#d2").val() != "") {
          this.sum2 = parseInt($("#d2").val()) + this.sum2;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd4() {
        this.sum1 = 0
        // if (this.sum2 != 0) {
        //   this.sum2 = this.sum2 - parseInt($("#c2").val());
        // }
        if ($("#c2").val() != "") {
          this.sum2 = this.sum2 - parseInt($("#c2").val());
          $("#c2").val(null)
        }
        if ($("#a1").val() != "") {
          this.sum1 = parseInt($("#a1").val()) + this.sum1;
        }
        if ($("#b1").val() != "") {
          this.sum1 = parseInt($("#b1").val()) + this.sum1;
        }
        if ($("#c1").val() != "") {
          this.sum1 = parseInt($("#c1").val()) + this.sum1;
        }
        if ($("#d1").val() != "") {
          this.sum1 = parseInt($("#d1").val()) + this.sum1;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd5() {
        this.sum2 = 0;
        // if (this.sum1 != 0) {
        //   this.sum1 = this.sum1 - parseInt($("#c1").val());
        // }
        if ($("#c1").val() != "") {
          this.sum1 = this.sum1 - parseInt($("#c1").val());
          $("#c1").val(null)
        }
        if ($("#a2").val() != "") {
          this.sum2 = parseInt($("#a2").val()) + this.sum2;
        }
        if ($("#b2").val() != "") {
          this.sum2 = parseInt($("#b2").val()) + this.sum2;
        }
        if ($("#c2").val() != "") {
          this.sum2 = parseInt($("#c2").val()) + this.sum2;
        }
        if ($("#d2").val() != "") {
          this.sum2 = parseInt($("#d2").val()) + this.sum2;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd6() {
        this.sum1 = 0
        // if (this.sum2 != 0) {
        //   this.sum2 = this.sum2 - parseInt($("#d2").val());
        // }
        if ($("#d2").val() != "") {
          this.sum2 = this.sum2 - parseInt($("#d2").val());
          $("#d2").val(null)
        }
        if ($("#a1").val() != "") {
          this.sum1 = parseInt($("#a1").val()) + this.sum1;
        }
        if ($("#b1").val() != "") {
          this.sum1 = parseInt($("#b1").val()) + this.sum1;
        }
        if ($("#c1").val() != "") {
          this.sum1 = parseInt($("#c1").val()) + this.sum1;
        }
        if ($("#d1").val() != "") {
          this.sum1 = parseInt($("#d1").val()) + this.sum1;
        }
        this.sum=number_chinese(this.sum1);
      },
      pd7() {
        this.sum2 = 0;
        // if (this.sum1 != 0) {
        //   this.sum1 = this.sum1 - parseInt($("#d1").val());
        // }
        if ($("#d1").val() != "") {
          this.sum1 = this.sum1 - parseInt($("#d1").val());
          $("#d1").val(null)
        }
        if ($("#a2").val() != "") {
          this.sum2 = parseInt($("#a2").val()) + this.sum2;
        }
        if ($("#b2").val() != "") {
          this.sum2 = parseInt($("#b2").val()) + this.sum2;
        }
        if ($("#c2").val() != "") {
          this.sum2 = parseInt($("#c2").val()) + this.sum2;
        }
        if ($("#d2").val() != "") {
          this.sum2 = parseInt($("#d2").val()) + this.sum2;
        }
        this.sum=number_chinese(this.sum1);
      },
     
      insert() {
        if($("#z1").val()!=""){
          this.credentialsLog.jzAbstract=$("#z1").val()
        }
        if($("#z2").val()!=""){
          this.credentialsLog.jzAbstract=this.credentialsLog.jzAbstract+","+$("#z2").val()
        }
        
        if($("#k1").val()!=""){
          this.credentialsLog.km=$("#k1").val()
        }
        if($("#k2").val()!=""){
          this.credentialsLog.km=this.credentialsLog.km+","+$("#k2").val()
        }
        
        ////////////////moment().format('YYYY/MM/DD')
        if($("#a1").val()!=""){
          this.credentialsLog.jzJfprice=$("#a1").val()
        }
        if($("#b1").val()!=""){
          this.credentialsLog.jzJfprice=this.credentialsLog.jzJfprice+","+$("#b1").val()
        }
        // if($("#c1").val()!=""){
        //   this.credentialsLog.jzJfprice=this.credentialsLog.jzJfprice+","+$("#c1").val()
        // }
        // if($("#d1").val()!=""){
        //   this.credentialsLog.jzJfprice=this.credentialsLog.jzJfprice+","+$("#d1").val()
        // }
        if($("#ga2").val()!=""){
          this.credentialsLog.jzDfprice=$("#a2").val()
        }
        if($("#b2").val()!=""){
          this.credentialsLog.jzDfprice=this.credentialsLog.jzDfprice+","+$("#b2").val()
        }
        // if($("#c2").val()!=""){
        //   this.credentialsLog.jzDfprice=this.credentialsLog.jzDfprice+","+$("#c2").val()
        // }
        // if($("#d2").val()!=""){
        //   this.credentialsLog.jzDfprice=this.credentialsLog.jzDfprice+","+$("#d2").val()
        // }
       this.credentialsLog2.jzKmId =  $("#k3").val();
       this.credentialsLog2.jzAbstract =  $("#z3").val();
       this.credentialsLog2.jzJfprice =  $("#c1").val();
       this.credentialsLog2.jzDfprice =  $("#c2").val();
       this.credentialsLog2.jzH = this.credentialsLog.jzH;
       this.credentialsLog2.datea = this.credentialsLog.datea
       this.credentialsLog2.jzProof = this.credentialsLog.jzProof;
      //  alert(JSON.stringify(this.credentialsLog2))
      //     console.log(this.credentialsLog)
        if(this.sum1==this.sum2){
          console.log(this.credentialsLog)
          axios.post("http://localhost:8888/CredentialsLog/insert", this.credentialsLog)
          .then(res => {
            console.log(res)

            this.loading = true;
            setTimeout(() => {
              this.loading = false;

              this.$message({
                message: '恭喜你，凭证新增成功！！',
                type: 'success'
                
              });

            }, 1);
            this.getlist();
            history.go(0)
          })
          .catch(err => {
            console.error(err);
            this.$message.error('凭证新增失败！！！');
          })
          axios.post("http://localhost:8888/CredentialsLog/insert1", this.credentialsLog2)
          .then(res => {
            console.log(res)

            this.loading = true;
            setTimeout(() => {
              this.loading = false;

              this.$message({
                message: '恭喜你，凭证新增成功！！',
                type: 'success'
                
              });

            }, 1);
            this.getlist();
            history.go(0)
          })
          .catch(err => {
            console.error(err);
            this.$message.error('凭证新增失败！！！');
          })
        
        }else{
          alert("借贷不平衡")
        }

      },
    }
  })
  function number_chinese(str) {
                    var num = parseFloat(str);
                    var strOutput = "",
                        strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';
                    num += "00";
                    var intPos = num.indexOf('.');  
                    if (intPos >= 0){
                        num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
                    }
                    strUnit = strUnit.substr(strUnit.length - num.length);
                    for (var i=0; i < num.length; i++){
                        strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i,1),1) + strUnit.substr(i,1);
                    }
                    return strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元")
            }
</script>

</html>